<template>
  <div class="chartContainer">
    <div class="title">投资规模</div>
    <div class="barChart" id="pieChart1"></div>
  </div>
</template>

<script>
import highcharts3d from 'highcharts/highcharts-3d'
export default {
  name: "pieChart",
  data(){
    return{
      chart:null
    }
  },
  mounted() {
    this.initChart()
  },
  methods:{
    initChart(){
      var Highcharts = require('highcharts');

      // 在 Highcharts 加载之后加载功能模块
      require('highcharts/modules/exporting')(Highcharts);
      Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function (color) {
        return {
          radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
          stops: [
            [0, '#00e3fd'],
            [1, '#0D5EB1'] // darken
          ]
        };
      });
      this.chart = Highcharts.chart('pieChart1', {
        chart: {
          type: 'pie',
          options3d: {
            enabled: true,
            alpha: 45,
            beta: 0
          },
          backgroundColor: 'rgba(0,0,0,0)',
        },
        plotOptions: {
          pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            depth: 35,
            dataLabels: {
              enabled: true,
              format: '{point.name}'
            }
          }
        },
        // colors: ['#00e3fd'],
        series: [{
          type: 'pie',
          name: '项目进度',
          data: [
            ['在建',   123],
            {
              name: '已投产',
              y: 132,
              sliced: true,
              selected: true
            },
            {
              name: '前期审批',
              y: 78,
              sliced: true,
              selected: true
            },
            {
              name: '竣工待验收',
              y: 28,
              sliced: true,
              selected: true
            },
          ]
        }]
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.chartContainer{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: start;
  flex-direction: column;
.title{
  background-image: url("./assets/images/小标题.png");
  width: 20%;
  height: 25px;
  background-size: 100% 100%;
  color: white;
}
.barChart{
  width: 110%;
  height: 100%;
}
}
::v-deep .highcharts-exporting-group {
  display: none;
}
::v-deep .highcharts-title{
  display: none;
}
</style>